<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Table homework</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <style type="text/css">
        table {
            background-color: #FFF;
            border: none;
            color: #565;
            font: 12px arial;
        }
        table caption {
            padding: 10px;
            font-size: 24px;
            border-bottom: 2px solid #68E3FD;
            border-top: 2px solid #68E3FD;
        }

        table, td, th {
            margin: auto;
            padding: 0;
            vertical-align: middle;
            text-align:left;
        }

        tbody td, tbody th {
            background-color: #72E0F7;
            border-bottom: 2px solid #B3DE94;
            border-top: 3px solid #FFFFFF;
            padding: 5px 20px;
        }

        tfoot td, tfoot th {
            font-weight: bold;
            padding: 4px 8px 6px 9px;
            text-align:center;
        }

        thead th {
            font-size: 14px;
            font-weight: bold;
            line-height: 40px;
            padding: 0 8px 2px;
            text-align:center;
        }

        tbody tr.odd th,tbody tr.odd td { 
            background-color: #CEA;
            border-bottom: 2px solid #67BD2A;
        }

        td+td+td,col.price{ 
            text-align:right;
        }

        tbody tr:hover td, tbody tr:hover th {
            background-color: #8b7;
            color:#fff;
        }
        #send{
            margin:auto;
        }
</style>
</head>
<body>
	<div id="send">
        <button id="update">UPDATE</button>
    </div>
    <table>
            <caption>User List</caption> 
            <thead>
                <tr>
                    <th >ID</th>
                    <th >NAME</th>
                    <th >AGE</th>
                    <th >DELETE</th>
                </tr>
            </thead>    
            <tbody id="tableanc">
            </tbody>
    </table>
    
    <script type="text/javascript">
        $(function(){
            //渲染
            var render = {
                renderTable : function(anchor,data){
                    $(data).each(function(index,obj){
                        var tr = $("<tr></tr>");
                        $("<td>"+obj.id + "</td>").appendTo(tr);
                        $("<td>"+obj.name + "</td>").appendTo(tr);
                        $("<td>"+obj.age + "</td>").appendTo(tr);
                        var deltd = $("<td></td>");
                        $("<button>DEL</button>").attr("class","delete").attr("id",obj.id).appendTo(deltd);
                        deltd.appendTo(tr);
                        tr.appendTo(anchor);
                    });
                },
                attachEvent : function(cla,event,fn){
                    $(cla).bind(event,fn);
                },
                removeChild : function(target){
                    $(target).children().remove();
                }
            }

            //自定义sender
            var sender = {
                get : function(url,fn){
                    $.get(url,function(data){
                          fn(data);
                    });
                },
                delete : function(url,fn){
                     $.ajax({
                        url:url,
                        type:"DELETE",
                        contentType:"application/json",
                        success:fn
                    });
                }
            }

            //更新操作
            $("#update").click(function(){
                render.removeChild($("#tableanc"));
                sender.get("http://zha-ita095-w7:3000/users",function(data){
                    render.renderTable($("#tableanc"),data);
                    render.attachEvent($(".delete"),"click",function(){
                        sender.delete("http://zha-ita095-w7:3000/users/"+$(this).attr("id"), function(){
                            $(this).parent().parent().remove();
                            //自动触发update
                            $("#update").trigger("click");
                        });
                    });
                });
            });
        });
	</script>
</body>
</html>